<template>
    <div class="area-select">
        <span v-if="!isShow">
            {{ modelValue }}
            <el-icon :size="30" color="#FA0202" style="cursor: pointer;" @click="isShow = !isShow">
                <MapLocation />
            </el-icon>
        </span>
        <KSelectArea class="area-select" @change="addressChange" v-else />
    </div>
</template>
<script setup lang="ts">
import { KSelectArea } from "@tomiaa/vue3-components";
import { ref, computed, onMounted, useAttrs, getCurrentInstance } from "vue";
const isShow = ref(false)

interface Props {
    modelValue: any;
    data: any;
    fieldNames: {
        province: string;
        city: string;
        area: string;
        autoEdit: boolean;
    };
}

// 接受父组件参数，配置默认值
const props = withDefaults(defineProps < Props > (), {
    modelValue: () => ({}),
    data: () => ({}),
    fieldNames: () => ({
        province: "province",
        city: "city",
        area: "district",
        autoEdit: false
    })
});

const emit = defineEmits(['update:modelValue', 'change'])
const addressChange = (val) => {
    console.log("val", val)
    let { provinceData, cityData, areaData } = val;
    let address = `${provinceData.name} - ${cityData.name} - ${areaData.name}`
    isShow.value = false;

    if (props.fieldNames.autoEdit) {
        props.data[`${props.fieldNames.province}`] = provinceData.name;
        props.data[`${props.fieldNames.city}`] = cityData.name;
        props.data[`${props.fieldNames.area}`] = areaData.name;
    }
    emit('update:modelValue', address)
    emit('change', address)
}
const openMap = () => {
    console.log('openMap')
}
</script>
<style lang="scss" scoped>
.area-select {
    :deep(.el-select) {
        width: 120px;
    }
}
</style>